
@tailwind base;
@tailwind components;
@tailwind utilities;

/* Advanced Audio Analysis System Design */
@layer base {
  :root {
    --background: 240 10% 3.9%;
    --foreground: 0 0% 98%;

    --card: 240 10% 3.9%;
    --card-foreground: 0 0% 98%;

    --popover: 240 10% 3.9%;
    --popover-foreground: 0 0% 98%;

    --primary: 142 76% 36%;
    --primary-foreground: 355 7% 97%;

    --secondary: 240 3.7% 15.9%;
    --secondary-foreground: 0 0% 98%;

    --muted: 240 3.7% 15.9%;
    --muted-foreground: 215 20.2% 65.1%;

    --accent: 240 3.7% 15.9%;
    --accent-foreground: 0 0% 98%;

    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;

    --border: 240 3.7% 15.9%;
    --input: 240 3.7% 15.9%;
    --ring: 142 76% 36%;

    --radius: 0.5rem;

    /* Custom Audio System Colors */
    --audio-primary: 142 76% 36%;
    --audio-secondary: 197 100% 60%; 
    --audio-accent: 287 85% 60%;
    --audio-warning: 45 100% 51%;
    --audio-danger: 0 84% 60%;
    --audio-success: 120 100% 40%;
    
    /* Glass morphism effects */
    --glass-bg: 240 10% 3.9% / 0.7;
    --glass-border: 0 0% 100% / 0.1;
  }

  body {
    @apply bg-background text-foreground antialiased;
    background-image: 
      radial-gradient(circle at 20% 50%, hsl(142 76% 36% / 0.3) 0%, transparent 50%),
      radial-gradient(circle at 80% 20%, hsl(197 100% 60% / 0.3) 0%, transparent 50%),
      radial-gradient(circle at 40% 80%, hsl(287 85% 60% / 0.2) 0%, transparent 50%);
    background-attachment: fixed;
    min-height: 100vh;
  }
}

/* Custom animations for audio visualization */
@keyframes waveform {
  0%, 100% { transform: scaleY(0.3); }
  50% { transform: scaleY(1); }
}

@keyframes pulse-ring {
  0% { transform: scale(0.8); opacity: 1; }
  100% { transform: scale(2.4); opacity: 0; }
}

@keyframes signal-flow {
  0% { transform: translateX(-100%); opacity: 0; }
  50% { opacity: 1; }
  100% { transform: translateX(100%); opacity: 0; }
}

.waveform-bar {
  animation: waveform 1s ease-in-out infinite;
}

.pulse-ring {
  animation: pulse-ring 2s cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite;
}

.signal-flow {
  animation: signal-flow 3s linear infinite;
}

/* Glass morphism utilities */
.glass {
  background: hsl(var(--glass-bg));
  backdrop-filter: blur(16px) saturate(180%);
  border: 1px solid hsl(var(--glass-border));
}

.glass-card {
  @apply glass rounded-xl border border-white/10;
  box-shadow: 
    0 8px 32px 0 hsl(0 0% 0% / 0.37),
    inset 0 1px 0 0 hsl(0 0% 100% / 0.05);
}

/* Professional data visualization styles */
.chart-container {
  @apply glass-card p-6;
  background: linear-gradient(135deg, 
    hsl(240 10% 3.9% / 0.9) 0%,
    hsl(240 7% 8% / 0.9) 100%);
}

.status-indicator {
  @apply w-3 h-3 rounded-full animate-pulse;
}

.status-active { @apply bg-green-500; }
.status-warning { @apply bg-yellow-500; }
.status-error { @apply bg-red-500; }
.status-idle { @apply bg-gray-500; }

/* Advanced button styles */
.btn-primary {
  @apply bg-gradient-to-r from-green-500 to-emerald-600 hover:from-green-600 hover:to-emerald-700;
  @apply text-white font-medium px-6 py-3 rounded-lg transition-all duration-200;
  box-shadow: 0 4px 12px hsl(142 76% 36% / 0.4);
}

.btn-secondary {
  @apply bg-gradient-to-r from-slate-700 to-slate-600 hover:from-slate-600 hover:to-slate-500;
  @apply text-white font-medium px-6 py-3 rounded-lg transition-all duration-200;
}

/* Advanced input styles */
.input-advanced {
  @apply glass-card px-4 py-3 text-sm;
  @apply focus:ring-2 focus:ring-green-500/50 focus:border-green-500/50;
  @apply transition-all duration-200;
}

/* Sidebar styles */
.sidebar-item {
  @apply flex items-center space-x-3 px-4 py-3 rounded-lg;
  @apply hover:bg-white/5 transition-all duration-200 cursor-pointer;
  @apply border border-transparent hover:border-white/10;
}

.sidebar-item.active {
  @apply bg-gradient-to-r from-green-500/20 to-emerald-500/20;
  @apply border-green-500/30 text-green-400;
}
